<template>
  <div class="about"  :class='stats.data'>
    <h1 @click="plusOne">This is an about page    {{countV2}}</h1>
  </div>
</template>

<script>

import {login } from './../utils/reqLongin';

import {   getCurrentInstance, watch ,computed} from 'vue';
import { reactive } from 'vue';


export default({

components:{},


 methods: {
    updateLocation() {
       this.data = 'South Pole';
      return   this.data;
    }
  },

  
  setup() {

  

    //reactive 创建响应时对象
    const stats  = reactive({
      areaList: [],
      controlList: [],
      areaNum: [],
      data:'123',
      count:1,
    });
      
      // 获取  到公共参数
      const { proxy } = getCurrentInstance()
      console.log("123",proxy);

      function  plusOne(){
          let data ={
            'grant_type':"password",
              'username':"admin",
                'password':"1234qwer",
         };
        login( data);
        stats.data = data
      }

// 计算属性
const count=computed( ()=>{

  return stats.count+1;
});

const countV2=computed( {
  get(){
    return  stats.count+1;
  },
  set(val){
    stats.count =val;
  },
});
   

   /**
    * watch 监听函数  写下面  写上面会报错
   * 接受三个参数：
   * 参数1：监听的数据源 (可以为一个ref或者一个函数) 
   * 参数2：回调函数 (newValue, oldValue) => {} 
   * 参数3：深度监听或立即执行的配置(deep: true, imediate: true)  imediate: true// 默认的执行一次
   */
  watch( ()=>stats.data,()  =>{

   console.log("stats 变化了");

  },{immediate:true});




 


    return {
       plusOne,
       stats,
       count,
       countV2,
       
    }
  },


 
})
</script>

